<template>
  <ul class="right-list-container">
    <li v-for="(item, index) in list" :key="index">
      <span :class="{ active: item.isSelect }" @click="handleSelect(item)">{{ item.name }}</span>
      <span :class="{ active: item.isSelect }" class="aside" @click="handleSelect(item)">{{
          item.aside
        }}</span>
      <RightList :list="item.children || []" @select="handleSelect"></RightList>
    </li>
  </ul>
</template>
<script lang="ts" name="RightList" setup>
interface ListItem {
  name: string
  isSelect: boolean
  aside: string
  children?: ListItem[]
}

interface Props {
  list: ListItem[]
}

interface Emit {
  (e: 'select', item: ListItem): void
}

defineProps<Props>()

const emit = defineEmits<Emit>()

const handleSelect = (item: ListItem) => {
  if (!item.isSelect) {
    emit('select', item)
  }
}
</script>
<style lang="less" scoped>
@import '@/styles/var.less';

.right-list-container {
  .right-list-container {
    margin-left: 1em;
  }

  li {
    min-height: 40px;
    line-height: 40px;
    cursor: pointer;

    .active {
      color: @warn;
    }
  }
}

.aside {
  font-size: 12px;
  margin-left: 1em;
  color: @gray;
}
</style>